<!DOCTYPE html>
<html lang="en">
<!--护士预约页面-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="images/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
    <link rel="manifest" href="../images/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="../images/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style>
        .select2,.ksid{
            border: 1px solid #cacaca;
            font-size: 17px;
            color: #0f4469;
            width: 100%;
            height: 50px;
            background-color: white;
            border-radius: 5px;
        }
        .container{
            margin-top: 150px;
        }
        #add{
            position: relative;
            bottom: 465px;
            left: 170px;
        }

       #span1,#span2,#span3{
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>

<!--办卡模态框-->
<div class="div" style="width: 0;height: 0px;padding-top: 20px;overflow: hidden">
    <div id="add-layer" style="display: none; padding: 20px">
        <form id="add-form"  class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="uname" id="uname" class="layui-input" lay-verify="required|username" autocomplete="off">
                    </label>
                    <span id="span3"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <label>
                        <select name="sex" id="sex" class="layui-input" lay-verify="required">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-block">
                    <label>
                        <input type="date" name="birthday" id="birthday" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="idcard" id="layui-idcard" class="layui-input" lay-verify="required|identity">
                    </label>
                    <span id="span2"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="phone" id="layui-phone" class="layui-input" lay-verify="required|phone">
                    </label>
                    <span id="span1"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="address" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">充值金额</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="balance" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add-form-submit">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>





<section class="appointment-one">
<div class="container">
    <div class="inner-container wow fadeInUp" data-wow-duration="1s">
        <div>
            <h3 class="appointment-one__title" style="float: left">获取预约</h3>
                <label class="appointment-one__label" style="margin-left: 150px;margin-top: 0px">卡号</label>
                <input type="text" name="reading" id="reading" class="reading appointment-one__field" placeholder="卡号" style="width: 200px;height: 35px">
                <buttonb type="submit" id="readingBtn" class="readingBtn appointment-one__btn thm-btn" style="width: 100px;height: 35px;margin-top: 19px;padding: 5px;border-radius: 13px">读卡</buttonb>
            <button type="submit" id="add-btn" class="addCard appointment-one__btn thm-btn" style="width: 200px;float: right">办理就诊卡</button>
            <div style="clear: both"></div>
        </div>
        <form class="subscribe appointment-one__form contact-form-vaidated">
            <div class="row align-items-end">
                <div class="col-xl-5 col-lg-6">
                    <label class="appointment-one__label">姓名</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">person</i>
                        </div>
                        <input type="text" name="name" id="name" class="name appointment-one__field" placeholder="姓名">
                    </div>
                </div><!-- /.col-lg-5 -->
                <div class="col-xl-4 col-lg-6">
                    <label class="appointment-one__label">出生年月</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">date_range</i>
                        </div><!-- /.appointment-one__icon -->
                        <input type="date" name="age" class="age appointment-one__field" placeholder="年龄" readonly>
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-4 -->
                <div class="col-xl-3 col-lg-6">
                    <label class="appointment-one__label">性别</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">person</i>
                        </div><!-- /.appointment-one__icon -->
                        <div class="appointment-one__switch-wrap">
                            <input type="hidden" name="sex" id="sexOne">
                            <button id="sex1" class="sex1 appointment-one__switch">男</button>
                            <button id="sex2" class="sex2 appointment-one__switch">女</button>
                        </div><!-- /.appointment-one__switch-wrap -->
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-3 -->
                <div class="col-xl-6 col-lg-6">
                    <label class="appointment-one__label">身份证号</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">person</i>
                        </div><!-- /.appointment-one__icon -->
                        <input type="text" name="idcard" id="idcard" class="idcard appointment-one__field" placeholder="输入身份证号">
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-5 -->
                <div class="col-xl-6 col-lg-6">
                    <label class="appointment-one__label">电话号码</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">phone</i>
                        </div><!-- /.appointment-one__icon -->
                        <input type="text" name="phone" class="phone appointment-one__field" placeholder="输入号码">
                    </div>
                   <!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-5 -->
                <div class="col-xl-4 col-lg-6">
                    <label class="appointment-one__label">预约日期</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">date_range</i>
                        </div><!-- /.appointment-one__icon -->
                        <input type="date" name="booking_date" class="appointment-one__field date1" οnfοcus="WdatePicker({minDate:'%y-%M-{%d}'})"  placeholder="制定日期">
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-4 -->
                <div class="col-xl-3 col-lg-6">
                    <label class="appointment-one__label">顾问小时</label>
                    <div class="appointment-one__form-group">
                        <div class="appointment-one__icon">
                            <i class="material-icons">access_time</i>
                        </div><!-- /.appointment-one__icon -->
                        <div class="appointment-one__switch-wrap">
                            <input type="hidden" name="schedule">
                            <button class="appointment-one__switch">上午</button>
                            <button class="appointment-one__switch active">下午</button>
                            <button class="appointment-one__switch">傍晚</button>
                        </div><!-- /.appointment-one__switch-wrap -->
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-3 -->
                <div class="col-xl-5 col-lg-6">
                    <label class="appointment-one__label">部门</label>
                    <div class="appointment-one__form-group">
                        <select class=" ksid" name="ksid" onchange="loadingConfig(this)">
                            <option value="1">心脏病科</option>
                            <option value="2">眼睛护理</option>
                            <option value="3">神经科</option>
                            <option value="4">儿科</option>
                            <option value="5">肝脏科</option>
                        </select>
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-5 -->
                <div class="col-xl-4 col-lg-6">
                    <label class="appointment-one__label">医生</label>
                    <div class="appointment-one__form-group">
                        <select id="select2"  class="select2" name="did">
                            <option>选择医生</option>
                        </select>
                    </div><!-- /.appointment-one__form-group -->
                </div><!-- /.col-lg-4 -->
                <div class="col-xl-3 col-lg-12">
                    <button type="submit"  class="add appointment-one__btn thm-btn">提交请求</button>
                </div><!-- /.col-lg-3 -->
            </div><!-- /.row -->
        </form>
        <div class="result"></div><!-- /.result -->
    </div><!-- /.inner-container -->
</div><!-- /.container -->
</section>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/theme.js"></script>
</body>
<script>
    function myDateFomat(t){
        let date=new Date(t);
        let y=date.getFullYear();
        let m=(date.getMonth()+1).toString().padStart(2,"0");
        let d=date.getDate().toString().padStart(2,"0");
        return y+"-"+m+"-"+d;
    }
</script>
<script>
    function myDateFomat1(t){
        let date=new Date(t);
        let y=date.getFullYear();
        let m=(date.getMonth()+1).toString().padStart(2,"0");
        let d=(date.getDate()+2).toString().padStart(2,"0");

        return y+"-"+m+"-"+d;
    }
</script>
<script>
    var price=30;
    var charge="预约收费";
    $(function () {
        $(".add").click(function () {
            if($("#name").val()==null||$("#name").val()==''){
                layer.open({
                    title:'提示',
                    content:'用户名不能为空',
                    offset:"80px",
                    icon:1
                })
                return false;
            }else if($("#idcard").val()==null||$("#idcard").val()==''){
                layer.open({
                    title:'提示',
                    content:'身份证号不能为空',
                    offset:"80px",
                    icon:1
                })
                return false;
            }else if($(".phone").val()==null||$(".phone").val()==''){
                layer.open({
                    title:'提示',
                    content:'手机号码不能为空',
                    offset:"80px",
                    icon:1
                })
                return false;
            }
            $.get("/queryVisid",{uname:$("#name").val(),idcard:$("#idcard").val()},function (date) {
                if(date==true){
                    $.get("/subscribe",$(".subscribe").serialize(),function (date) {
                        if(date==1){
                            layer.confirm("本次预约收费30元,是否要预约",function () {
                                $.get("/user/updateBalance",{uname:$("#name").val(),idcard:$("#idcard").val(),price:price,charge:charge},function (date) {
                                    if(date==true){
                                        $.get("/subscribe2",$(".subscribe").serialize(),function (date) {
                                            if(date==1){
                                                layer.open({
                                                    title:'提示',
                                                    content:'预约成功',
                                                    offset:"80px",
                                                    icon:1
                                                })
                                                setTimeout(function () {
                                                    location.reload();
                                                },1000)}
                                            else if(date==3){
                                                layer.open({
                                                    title:'提示',
                                                    content:'预约失败',
                                                    offset:"80px",
                                                    icon:1
                                                })
                                            }else {
                                                layer.open({
                                                    title:'提示',
                                                    content:'该患者为新用户，卡号是'+date+"请告知患者",
                                                    offset:"80px",
                                                    icon:3
                                                })

                                            }
                                        })
                                    }else {
                                        layer.open({
                                            title:'提示',
                                            content:'余额不足，先充值',
                                            offset:"80px",
                                            icon:4
                                        })
                                    }
                                })
                            })



                        }else if(date==3){
                            layer.open({
                                title:'提示',
                                content:'当天已经预约挂号过请勿重复预约',
                                offset:"80px",
                                icon:2
                            })
                        }else {
                        }
                    })

                }else if(date==false){
                    layer.open({
                        title:'提示',
                        content:'请先办卡',
                        offset:"80px",
                        icon:4
                    })
                }
            })
        })
    })
</script>
<script>
    //从数据库里面查询到医生的信息

    function loadingConfig(obj) {

        let id =$(obj).children('option:selected').attr("value");
        let date1=$(".date1").val()

        $.get("/subdocuser?id="+id+"&date1="+date1,function (date) {
            let docuser=date.docuser;

            $(".select2").empty();
            $(".ksid option[value='0']").remove();
            for (let i = 0; i < date.length; i++) {
                var num=date[i].docuser.notes-date[i].num;

                $(".select2").append("<option value="+date[i].docuser.did+">"+date[i].docuser.name+'（剩余预约名额'+num+')'+"</option>")

            }
            // $("#select2").append("<option value='Value'>Text</option>");  //添加一项option
        })
    }
</script>
<script>
    //从数据库里面查询到科室的信息
    $(function () {
        $.get("/subdeparement",function (date) {
            console.log(date)
            $(".ksid").empty();
            $(".ksid").append("<option value="+0+">请选择要预约的科室</option>")
            for (let i = 0; i < date.length; i++) {
                $(".ksid").append("<option value="+date[i].ksid+">"+date[i].ksname+"</option>")

            }
            // $("#select2").append("<option value='Value'>Text</option>");  //添加一项option
        })
    })
</script>
<script>
    $(function () {
        var now =new Date();
        // alert(myDateFomat1(now))
        $(".date1").attr("min",myDateFomat(now));

        $.get("/loginin",function (date) {
            if(date!="0"){
                $(".div1").css("display","none")
                $(".div2").css("display","block")
                $(".diva1").text("欢迎您"+date)
            }else {
                $(".div1").css("display","block")
                $(".div2").css("display","none")

            }
        })
        $.get("/logindate",function (date) {
            if(date!=null){
                console.log(date)
                $(".name").val(date[0].uname);
                $(".age").val(myDateFomat(date[0].birthday));
                $(".phone").val(date[0].phone);
                if(date[0].sex=="男"){
                    $(".sex1").addClass("active");
                }else{
                    $(".sex2").addClass("active");
                }
            }
        })
        $(".diva2").click(function () {
            $.get("/loginout",function (date) {
                if(date=="true"){
                    window.location.replace("/ManagementEnd/sign-in.html")
                }
            })
        })
        $(".login").click(function () {
            window.location.replace("/ManagementEnd/sign-in.html")
        })
    })
</script>
<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var AddIndex;
            // 显示添加弹出层
            $('#add-btn').click(function () {
            $('#add-form')[0].reset();
            $("#uname").val($("#name").val());
            var sex=document.getElementById("sexOne").value;
            $("#sex").val($("#sexOne").val()).select();
            $("#birthday").val($(".age").val());
            $("#layui-idcard").val($("#idcard").val());
            $("#layui-phone").val($(".phone").val());
            AddIndex = layer.open({
                type: 1,
                title: '办理就诊卡',
                skin: 'layui-layer-molv',
                area: ['500px'],
                offset: "35px",
                content: $('#add-layer')
            });
        });
        form.on('submit(add-form-submit)', function (data) {
            $.get("/user/insertCard",data.field, function (date) {
                if (date == true) {
                    var balance=data.field.balance;
                    var uname=data.field.uname;
                    var idcard=data.field.idcard
                    console.log(typeof(idcard))
                    $.get("/insertBalance" ,{
                        balance:balance,
                        uname:uname,
                        idcard:idcard
                    }, function (date) {
                        if (date == 0) {
                            layer.close(AddIndex);
                            layer.open({
                                title:'提示',
                                content:'办理失败',
                                offset:"80px",
                                icon:1
                            })
                        }else {
                            layer.close(AddIndex);
                            layer.open({
                                title:'提示',
                                content:'办理成功'+'<br>'+'您的卡号是:'+'<h3 style="color: red;display: inline-block"><b>'+date+'</b></h3>',
                                offset:"80px",
                                icon:1
                            })
                        }
                    })
                } else if (date == false) {
                    layer.open({
                        title:'提示' ,
                        content:'该身份号已被注册！',
                        offset:"80px",
                        icon:2
                    })
                }
            })
            return false;
        });
    });
</script>
<script>
    $("#name").blur(function () {
        var name=$("#name").val();
        var patten=/^[\u4E00-\u9FA5]{1,6}$/;
        if(!name){
            $("#name").attr("placeholder","*姓名不能为空");
            $("#name").css("border-color","red");
        }else if(!patten.test(name)){
            $("#name").val("");
            $("#name").attr("placeholder","*姓名不符合规范");
            $("#name").css("border-color","red");
        }else {
            $("#name").css("border-color","#CACACA");
        }
    });

    $("#idcard").blur(function () {
        var idcard=$("#idcard").val();
        var patten= /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(!idcard){
            $("#idcard").attr("placeholder","*身份证号不能为空");
            $("#idcard").css("border-color","red");
        }else if(!patten.test(idcard)){
            $("#idcard").val("");
            $("#idcard").attr("placeholder","*身份证号不符合规范");
            $("#idcard").css("border-color","red");
        }else {
            $("#idcard").css("border-color","#CACACA");
            let birthday=  getBirthday(idcard);
            $(".age").val(birthday);
        }
    });
    $(".phone").blur(function () {
        var phone=$(".phone").val();
        var patten=/(1[3-9]\d{9}$)/;
        if(!phone){
            $(".phone").attr("placeholder","*手机号码不能为空");
            $(".phone").css("border-color","red");
        }else if(!patten.test(phone)){
            $(".phone").val("");
            $(".phone").attr("placeholder","*手机号码不符合规范");
            $(".phone").css("border-color","red");
        }else {
            $(".phone").css("border-color","#CACACA");
        }
    });
</script>
<script>
    $("#readingBtn").click(function () {
        var visid=$("#reading").val();
        $.get("/user/queryUserAll?visid="+visid,function (date) {
            $("#name").val(date.uname);
            $(".age").val(myDateFomat(date.birthday));
            if(date.sex=='男'){
                $(".sex1").addClass("active");
                $(".sex2").removeClass("active");
                $("#sexOne").val("男");
            }else {

                $(".sex2").addClass("active");
                $(".sex1").removeClass("active");
                $("#sexOne").val("女");


            }
            $("#idcard").val(date.idcard);
            $(".phone").val(date.phone);
        })
    })
</script>
<script>
    //截取身份证号获得出生年月日
    function getBirthday(idno) {
        var birthday="";
        if (idno.length==18){
            var  year= idno.substr(6,4);
            var  month= idno.substr(10,2);
            var  day= idno.substr(12,2);
            birthday=year+"-"+month+"-"+day;
            return birthday;
        }else if(idno.length==15){
            var  year="19"+ idno.substr(6,2);
            var  month= idno.substr(8,2);
            var  day= idno.substr(10,2);
            birthday=year+"-"+month+"-"+day;
            return birthday;
        }
    }

</script>
</html>